<template>
    <div class="Table">
        <div class="list">
            <div class="opeartion">
                <div class="left-box">
                    <slot name="searchOptLeft" />
                </div>
                <div class="right-box">
                    <!-- <slot name="searchOptRight" /> -->
                    <a-form ref="form" layout="inline">
                        <TableFormItem :opts="searchOptions" :search-form="searchForm" @query="flush" />
                    </a-form>
                </div>
            </div>
            <div v-if="is2Pagenation" class="top-pagenation">
                <Pagenation v-if="isPagenation && tableDatas && tableDatas.length" :pages="pages" :total="total"
                    :len="tableDatas.length" @pager-change="handlePager" />
            </div>
            <!-- :expandIconColumnIndex=-1 :expandIconAsCell='false' :expandedRowKeys="expandedRowKeys" -->
            <!-- @expandedRowsChange="expandedRowsChange" childrenColumnName="children"
            :row-selection="rowSelection"-->
            <a-table :defaultExpandAllRows="true" :row-key="(record: any) => record.id" :pagination="false"
                :dataSource="tableDatas" :expandIconAsCell='false' v-bind="conf" :columns="columns" :loading="loading"
                @expand="expandByIcon" :customCell="handlerCustomCell" :rowClassName="changeRowStyle"
                :scroll="scrollParams">
                <template #bodyCell="{ column, record, index }">
                    <slot v-if="column.slot && column.slot !== 'opt'" :name="column.slot" :row="record"
                        :index="index" />
                    <slot v-if="column.slot && column.slot === 'opt'" :name="'opt'">
                        <div class="opts">
                            <i class="far fa-edit" v-permission="['modifyFlag']" v-if="column.edit"
                                style="margin-right: 8px;cursor:pointer;" @click="handleEditor(record)" />

                            <a-popconfirm placement="top" :ok-text="$t('确定')" :cancel-text="$t('取消')"
                                @confirm="handleDelete(record)">
                                <template #title>
                                    <p>{{ $t('你确定要删除吗') }}</p>
                                </template>
                                <i v-permission="['removeFlag']" v-if="column.delete" class="far fa-trash-alt"
                                    style="margin-right: 8px;cursor:pointer;color: red" />
                            </a-popconfirm>
                        </div>
                    </slot>
                    <!-- <span v-if="!column.slot">{{ [column.prop] }}</span> -->
                </template>
            </a-table>
            <Pagenation :showSelect="showSelect" v-if="isPagenation && tableDatas && tableDatas.length"
                :pages="props.pages" :total="total" :len="tableDatas.length" @pager-change="handlePager" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import TableFormItem from './table-form-item.vue'
import Pagenation from './Pagenation.vue'
import { autoCompleteProps } from 'ant-design-vue/es/auto-complete';
const { t: $t } = useI18n();
const expandedRowKeys = ref([])
const props = defineProps({
    searchOptions: {
        required: true,
        type: Array,
        default: [],
    },
    conf: {
        required: true,
        type: Object,
        default: () => { },
    },
    loading: {
        required: true,
        type: Boolean,
        default: true,
    },
    tableDatas: {
        required: true,
        type: Array,
        default: [],
    },
    columns: {
        required: true,
        type: Array,
        default: [],
    },
    pages: {
        required: true,
        type: Object,
        default: () => { },
    },
    total: {
        required: true,
        type: Number,
        default: 10,
    },
    isPagenation: {
        required: true,
        type: Boolean,
        default: true,
    },
    scrollParams: {
        required: false,
        type: Object,
        default: {},
    },
    is2Pagenation: {
        required: true,
        type: Boolean,
        default: false,
    },
    checkStrictly: { type: [Boolean], default: false },
    showSelect: {
        type: Boolean,
        default: true,
    },
});
const emits = defineEmits(['search', 'editor', 'delete']);
let searchForm = ref({});
const init = () => {
    // handlePage();
    handleFormInit()
};
const expandedRowsChange = (expandedRows: any) => {
    // console.log('获取rows的id====>', expandedRows);

}
const expandByIcon = (expanded: any, record: any) => {
    console.log('==expanded========record======>', expanded, record);
}
const changeRowStyle = (record: any, index: number) => {
    // if(record.level===record.id){}
    return (index % 2 === 1 ? 'table-striped' : null)
}
const handlerCustomCell = (record: any, rowIndex: any, column: any) => {
    console.log('handlerCustomCell===============>', record, rowIndex, column);
}
const rowSelection = ref({
    // checkStrictly: false,
    onChange: (selectedRowKeys: (string | number)[], selectedRows: []) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record: [], selected: boolean, selectedRows: []) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: boolean, selectedRows: [], changeRows: []) => {
        console.log(selected, selectedRows, changeRows);
    },
});
const handleFormInit = () => {
    let form = {};
    for (const key in props.searchOptions) {
        if (Object.hasOwnProperty.call(props.searchOptions, key)) {
            const item = props.searchOptions[key];
            form[item.prop] = item.default;
        }
    }
    searchForm.value = form;
};
onMounted(() => {
    init();
});

const handleQuery = debounce(() => {
    // 暂时不加校验
    // this.$refs['searchForm'].validate((valid) => {
    //   if (!valid) return;
    //   this.$emit('search', { searchForm: this.searchForm, pager: this.page });
    // });
    emits('search', { searchForm: searchForm.value, pager: props.pages })
}, 800);
const flush = () => {
    emits('search', { searchForm: searchForm.value, pager: { pageSize: props.pages.pageSize, pageNo: 1 } })
}
const handlePager = (pager: any) => {
    emits('search', { searchForm: searchForm.value, pager: pager });
};
const handleDelete = (item: any) => {
    emits('delete', item);
};
const handleEditor = (item: any) => {
    emits('editor', item);
};
defineExpose({
    flush
})
</script>
<style lang="scss" scoped>
.Table {
    padding-bottom: 20px;

    .ant-form {
        width: 100%;
        display: flex;

        .search {
            border-left: none !important;
            border-radius: 0 4px 4px 0 !important;
        }
    }

}

.list {
    width: 100%;

    // padding: 20px;
    // margin-top: 10px;
    .opeartion {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .left-box,
        .right-box {
            display: flex;
            align-items: center;
            column-gap: 10px;
        }
    }

    .top-pagenation {
        margin-bottom: 10px;
    }

    .opts {
        display: flex;
        justify-content: center;
        // column-gap: 10px;
    }
}

::v-deep {
    .ant-table-row.ant-table-row-level-1 {
        .ant-table-cell.ant-table-cell-ellipsis:nth-child(2) {
            text-indent: 15px;
            font-weight: 300;
        }
    }

    .ant-table-row.ant-table-row-level-2 {
        .ant-table-cell.ant-table-cell-ellipsis:nth-child(2) {
            text-indent: 30px;
            font-weight: 500;
        }
    }

    .ant-table-row.ant-table-row-level-3 {
        .ant-table-cell.ant-table-cell-ellipsis:nth-child(2) {
            text-indent: 45px;
            font-weight: 700;
        }
    }

    .ant-table-row.ant-table-row-level-4 {
        .ant-table-cell.ant-table-cell-ellipsis:nth-child(2) {
            text-indent: 60px;
        }
    }

    // .ant-table-row.ant-table-row-level-2 {
    //     text-indent: 30px;
    // }

    // .ant-table-row.ant-table-row-level-3 {
    //     text-indent: 45px;
    // }

    .ant-table-wrapper .ant-table-thead>tr>th {
        background-color: #ececec;
        color: #676a6c;
    }

    .ant-table-wrapper .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
        background-color: #f4f4f4;

    }

    .ant-table-wrapper .ant-table-container table>thead>tr:first-child>*:first-child {
        border-start-start-radius: 0px;

    }

    .ant-table-wrapper .ant-table-container table>thead>tr:first-child>*:last-child {
        border-start-end-radius: 0px;
    }

    .ant-table-measure-row {
        display: none;
    }
}

:deep(.table-striped) td {
    background-color: #f6f6f6;
}
</style>